<template> 
    <div class="prd-card float-left">
        <div class="content" @click="jumpDetail(item,index)">
            <div class="img-box">
                <img :src="imgUrl?'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+imgUrl:'https://rqys.hleason.com/dist/images/plh.png'"/>
                <div class="info clear-both">
                    <div class="float-left hits"> <i class="iconfont-shurukuangchakanmima iconfont"></i><span>{{hits}}</span></div>
                    <div class="float-right time">{{time}}</div>
                </div>
            </div>
            <div class="text-info" v-show="title">
                <div class="title">{{title}}</div>
                <!--<div class="detail">{{text}}</div>-->
            </div>
        </div>
    </div> 
</template>

<script> 
export default {
    data(){
        return{ 
             
        } 
    },
    props: {
        title:{
            default:'',
            type:String
        },
        text:{
            default:'',
            type:String
        },
        imgUrl:{
            default:'',
            type:String
        },
        hits:{
            default:'',
        },
        time:{
            default:'',
            type:String
        },
        item:{
            default:{},
            type:Object
        },
        index:{
            default:0
        }
    },
    methods:{
        jumpDetail(item,index){
            this.$emit('jump',item,index);
        }
    },
}
</script>

<style scoped lang="scss">
.prd-card{ 
    width:50%;
    box-sizing:border-box;  
    padding:0 10rpx 20rpx 10rpx;
    
    .content{  
        border:1rpx solid #ddd;
        border-radius:20rpx;
        background:#fff;
        height:300rpx;
        .img-box{
            width:100%;
            height:240rpx;
            position:relative;
            img{
                width:100%;
                height:100%;
                border:0;
                border-top-left-radius :10rpx;
                border-top-right-radius :10rpx;
            }
            .info{
                position:absolute;
                bottom:20rpx;
                width:100%;
                font-size:28rpx;
                color:#fff;
                padding:10rpx;
                box-sizing:border-box;
                .hits{
                    .iconfont{
                        display:inline-block;
                        font-size:24rpx !important;
                    }
                    span{
                        display:inline-block;
                        margin-left:10rpx;
                    }
                }

            }
        }
        .text-info{
            padding:15rpx 20rpx;
            .title{
                color:#333;
                font-size:28rpx;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            .detail{
                color:#BAB8B6;
                font-size:24rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
    }
}
</style>
